<template>
  <el-main>
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品类型搜索">
          <el-input
            v-model="formInline.goodsName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="foot">
      <div class="heng">
        <div class="new" @click="open">新建</div>
        <div class="import" @click="importNum">导入数据</div>
      </div>
      <div class="list">
        <template>
          <el-table :data="list" style="width: 100%">
            <el-table-column
              label="序号"
              width="70"
              prop="index"
            ></el-table-column>
            <el-table-column
              prop="skuName"
              label="商品名称"
              width="100"
            ></el-table-column>
            <el-table-column label="商品图片">
              <template v-slot="{ row }"
                ><img :src="row.skuImage" alt="" width="50"
              /></template>
            </el-table-column>
            <el-table-column prop="brandName" label="品牌"> </el-table-column>
            <el-table-column prop="unit" label="规格" width="100">
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="100">
            </el-table-column>
            <el-table-column
              prop="skuClass.className"
              label="商品类型"
              width="80"
            >
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期" width="170">
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <span style="color: #5f84ff" @click="reviseFn(row)">修改</span
                >&nbsp;
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="ye">
          <div class="ye-one">
            共{{ totalCount }}条记录 第{{ pageIndex }}/{{ totalPage }}页
          </div>
          <div
            class="ye-two"
            @click="pre(-1)"
            :class="{ active: pageIndex === '1' }"
          >
            上一页
          </div>
          <div
            class="ye-three"
            @click="next(1)"
            :class="{ active: pageIndex === totalPage }"
          >
            下一页
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="type ? '新增商品' : '修改商品'"
      :visible.sync="dialogVisible"
      width="40%"
      :modal-append-to-body="men"
    >
      <el-form :model="goodsNumber" :rules="rules" ref="roleForm">
        <el-form-item label="商品名称:" prop="skuName">
          <el-input
            type="text"
            placeholder="请输入"
            style="width: 400px"
            v-model="goodsNumber.skuName"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌:" style="margin-left: 30px" prop="brandName">
          <el-input
            type="text"
            placeholder="请输入"
            style="width: 400px"
            v-model="goodsNumber.brandName"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品价格:" style="margin-left: 5px" prop="price">
          <el-input
            type="text"
            style="width: 350px"
            v-model="goodsNumber.price"
          ></el-input>
          <span>元</span>
        </el-form-item>
        <el-form-item label="商品类型:" style="margin-left: 5px">
          <template>
            <el-select
              v-model="value"
              placeholder="请选择"
              style="width: 400px"
            >
              <el-option
                v-for="(item, index) in goodsName"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="规格:" style="margin-left: 30px" prop="unit">
          <el-input
            type="text"
            placeholder="请选择"
            style="width: 400px"
            v-model="goodsNumber.unit"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品图片:" style="margin-left: 10px">
          <el-upload
            class="avatar-uploader"
            action="http://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
            :show-file-list="false"
            name="fileName"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="数据导入"
      :visible.sync="centerDialogVisible"
      :modal-append-to-body="men"
      width="30%"
      center
    >
      <el-form>
        <el-form-item label="标题">
          <el-upload
            class="avatar-uploader"
            action="http://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
            :show-file-list="false"
            name="fileName"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">支持拓展名:xls,xlsx</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >上传</el-button
        >
      </span>
    </el-dialog>
  </el-main>
</template>

<script>
import { getManageSearch, getManagePost, getManageRevise } from '@/api/goods'
export default {
  data () {
    return {
      centerDialogVisible: false,
      imageUrl: '',
      fileList: [],
      formInline: {
        goodsName: ''
      },
      pageIndex: 1,
      pagesize: 10,
      list: [],
      totalCount: '',
      totalPage: '',
      // className: '',
      dialogVisible: false,
      men: false,
      value: '',
      classNameList: [],

      goodsNumber: {
        skuName: '',
        skuImage: '',
        price: '',
        unit: '',
        brandName: '',
        classId: 0,
        skuId: ''
      },
      skuClass: [],
      goodsName: [],
      skuImage: [],
      type: true,
      skuId: '',
      rules: {
        skuName: [
          { required: true, message: '请输入商品名称', triggle: 'blur' }
        ],
        price: [{ required: true, message: '请输入商品价格', triggle: 'blur' }],
        brandName: [
          { required: true, message: '请输入商品品牌', triggle: 'blur' }
        ],
        unit: [{ required: true, message: '请输入商品规格', triggle: 'blur' }]
      }
    }
  },
  async created () {
    this.getManageSearch(0)
  },
  methods: {
    importNum () {
      this.centerDialogVisible = true
    },
    handleAvatarSuccess (res, file) {
      this.goodsNumber.skuImage = res
      console.log(res)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async onSubmit () {
      const res = await getManageSearch({
        pageIndex: 1,
        pagesize: 10,
        skuName: this.formInline.goodsName,
        classId: this.classId
      })
      console.log(res)
      this.list = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      // 添加索引1.2.3...
      res.currentPageRecords.forEach((item, index) => {
        item.index = (this.pageIndex - 1) * 10 + index + 1
      })
      res.currentPageRecords.forEach((item, index) => {
        item.price = (item.price / 100).toFixed(2)
      })
      res.currentPageRecords.forEach((item, index) => {
        item.createTime = item.createTime.replace('T', '.')
      })
      this.list = res.currentPageRecords
    },
    async getManageSearch (num) {
      const res = await getManageSearch({
        pageIndex: this.pageIndex ? Number(this.pageIndex) + num : 1,
        pagesize: this.pagesize
      })
      console.log(res.currentPageRecords)
      this.list = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      // 添加索引1.2.3...
      res.currentPageRecords.forEach((item, index) => {
        item.price = (item.price / 100).toFixed(2)
      })
      res.currentPageRecords.forEach((item, index) => {
        item.index = (this.pageIndex - 1) * 10 + index + 1
      })
      this.skuClass = res.currentPageRecords.map(
        (item, index) => item.skuClass
      )
      this.goodsName = this.skuClass.map((item, index) => item.className)
      this.skuImage = res.currentPageRecords.map(
        (item, index) => item.skuImage
      )
      res.currentPageRecords.forEach((item, index) => {
        item.createTime = item.createTime.replace('T', '.')
      })
      this.list = res.currentPageRecords
      console.log(res.currentPageRecords)
    },
    next (num) {
      if (this.pageIndex === this.totalPage) return
      this.getManageSearch(num)
    },
    pre (num) {
      if (this.pageIndex === '1') {
        return
      }
      this.getManageSearch(num)
    },
    open () {
      this.dialogVisible = true
    },
    closeFn () {
      this.dialogVisible = false
      this.type = true
      this.$refs.roleForm.resetFields()
    },
    reviseFn (b) {
      this.type = false
      this.dialogVisible = true

      this.goodsNumber.skuName = b.skuName
      this.goodsNumber.skuImage = b.skuImage
      this.goodsNumber.price = b.price
      this.goodsNumber.unit = b.unit
      this.goodsNumber.brandName = b.brandName
      this.goodsNumber.classId = b.classId
      this.goodsNumber.skuId = b.skuId
      this.skuId = b.skuId
    },
    async submit () {
      if (this.type) {
        await this.$refs.roleForm.validate()
        await getManagePost(this.goodsNumber)
        this.$message.success('添加成功了哦')
        this.dialogVisible = false
      } else {
        await this.$refs.roleForm.validate()
        await getManageRevise(this.skuId, this.goodsNumber)
        this.$message.success('修改成功了哦')
        this.dialogVisible = false
      }
      this.getManageSearch(0)
      this.closeFn()
    }
  }
}
</script>

<style scoped lang="less">
.el-main {
  background-color: #f8fafd;
  .head {
    height: 100px;
    width: 1220px;
    background-color: #ffffff;
    padding-top: 30px;
    padding-left: 10px;
    .el-button.el-button--primary {
      background-color: #5f84ff;
    }
  }
  .foot {
    height: 2000px;
    width: 1220px;
    overflow: hidden;
    margin-top: 20px;
    background-color: #ffffff;
    .heng {
      display: flex;
      .new {
        width: 70px;
        height: 30px;
        background-color: #ff8638;
        color: white;
        text-align: center;
        line-height: 30px;
        margin-left: 20px;
        margin-top: 10px;
        border-radius: 5px;
      }
      .import {
        width: 70px;
        height: 30px;
        background-color: #f3e7e1;
        color: #7e746f;
        text-align: center;
        line-height: 30px;
        margin-left: 20px;
        margin-top: 10px;
        border-radius: 5px;
        font-size: 14px;
      }
    }
    .list {
      .ye {
        display: flex;
        margin-top: 30px;
        .ye-one {
          color: #e7eaee;
          margin-left: 20px;
        }
        .ye-two {
          width: 70px;
          height: 30px;
          background-color: #d5ddf8;
          text-align: center;
          line-height: 30px;
          margin-left: 800px;
          margin-right: 20px;
          cursor: pointer;
        }
        .ye-three {
          width: 70px;
          height: 30px;
          background-color: #d5ddf8;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
        }
        .active {
          cursor: not-allowed;
          color: #888;
        }
      }
    }
  }
}
.dialog-footer {
  margin-left: 0;
}
</style>
